import React, { FC, useState } from "react";
import styles from "../../../assets/css/common.module.scss";
import { Typography, Empty, Spin } from "antd";
import QuestionCard from "../../../components/questionCard.js";
import ListSearch from "../../../components/ListSearch";
import useSearchQuestionData from "../../../hooks/useLoadSearchQuestionData.js";
import ListPage from "../../../components/ListPage.js";

const { Title } = Typography;
const Star: FC = () => {
  // const [questionList, setQuestionList] = useState([
  //   {
  //     _id: "q3",
  //     title: "问卷3",
  //     isPublished: true,
  //     isStar: true,
  //     answerCount: 8,
  //     creatdAt: "2022-11-15",
  //   },
  //   {
  //     _id: "q5",
  //     title: "问卷5",
  //     isPublished: true,
  //     isStar: false,
  //     answerCount: 15,
  //     creatdAt: "2022-12-10",
  //   },
  //   {
  //     _id: "q7",
  //     title: "问卷7",
  //     isPublished: true,
  //     isStar: true,
  //     answerCount: 18,
  //     creatdAt: "2023-01-20",
  //   },
  // ]);
  const { loading, data = {} } = useSearchQuestionData({ isStar: true });
  const { list = [], total = 0 } = data;

  return (
    <>
      <div className={styles.box}>
        <div className={styles.header}>
          <Title level={3}>星标问卷🌟</Title>
          <ListSearch />
        </div>

        <div className={styles.container}>
          {loading && (
            <div style={{ textAlign: "center" }}>
              <Spin size="large" />
            </div>
          )}
          {!loading && list.length === 0 && <Empty description="暂无数据" />}
          {!loading &&
            list.length > 0 &&
            list.map((item: any) => {
              const { _id } = item;
              return <QuestionCard key={_id} {...item} />;
            })}
        </div>

        <div className={styles.footer}>
          <ListPage total={total} />
        </div>
      </div>
    </>
  );
};
export default Star;
